<script setup>
import { ref } from 'vue'

const props = defineProps({
  images: { type: Array, default: () => [] }
})

const previewIndex = ref(0)
const viewerVisible = ref(false)
const openPreview = (index) => {
  previewIndex.value = index
  viewerVisible.value = true
}
</script>

<template>
  <div class="gallery">
    <el-row :gutter="12">
      <el-col v-for="(img, idx) in images" :key="img" :xs="12" :md="6">
        <div class="tile" @click="openPreview(idx)">
          <el-image :src="img" fit="cover" loading="lazy" :preview-src-list="[]" />
        </div>
      </el-col>
    </el-row>

    <el-image-viewer
      v-if="viewerVisible"
      :url-list="images"
      :initial-index="previewIndex"
      @close="viewerVisible = false"
    />
  </div>
</template>

<style scoped>
.gallery { padding: 8px 0 }
.tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  border: 1px solid rgba(255, 153, 102, 0.25);
  box-shadow: 0 6px 14px rgba(255, 122, 69, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(255, 122, 69, 0.18) }
.tile :deep(img) { width: 100%; height: 100%; object-fit: cover }
</style> 